<template>
  <div class="baseInfo pink">
    <div class="camera">
      <img src="@/assets/img/common/camera.png">
    </div>
    <div class="info flex flex-between">
      <img class="avatar" :src="baseInfo.avatar">
      <div class="center flex flex-column flex-around">
        <p class="name">{{baseInfo.name}}</p>
        <p class="wxNumber">微信号：{{baseInfo.wxID}}</p>
      </div>
      <div class="flex flex-column flex-end">
        <div class="right">
          <van-icon size=".4rem" color="#666666" name="qr"/>
          <van-icon class="arrow" size=".4rem" color="#666666" name="arrow"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {baseInfo} from "@/data/me";
import Vue from 'vue';
import {Icon} from 'vant';

Vue.use(Icon);
export default {
  name: "baseInfo",
  data(){
    return{
      baseInfo
    }
  }
}
</script>

<style lang="less" scoped>
.baseInfo {
  background-color: #fff;

  .camera {
    img {
      float: right;
      width: .5rem;
      height: .5rem;
      margin: .4rem .4rem 0 0;
    }
  }

  .info {
    padding: .6rem .4rem 1rem .6rem;
    clear: both;

    .avatar {
      width: 1.6rem;
      height: 1.6rem;
      border-radius: .2rem;
      margin-right: .4rem;
    }

    .center {
      flex: 1;

      .name {
        font-weight: 600;
        font-size: .55rem;
      }

      .wxNumber {
        font-size: .4rem;
        color: #666666;
      }
    }

    .right {
      .arrow {
        margin-left: .3rem;
      }
    }
  }
}

.flex-end {
}
</style>